<template>
	<div class="custom-head" :class="{'gradient':gradient}">
		<div class="status_bar"></div>
		<div class="custom-head-body">
			<div class="back" v-if="back" @tap="backFn()">
				<i class="iconfont icon-right"></i>
			</div>
			<slot>
				<h4>{{title}}</h4>
			</slot>
			<div class="tool">
				<slot name="right"></slot>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	props:{
		title:{
			type:String
		},
		back:{
			type:Boolean,
			default:false
		},
		gradient:{
			type:Boolean,
			default:false
		}
	},
	data(){
		return {
			
		}
	},
	methods:{
		backFn(){
			uni.navigateBack();
		}
	}
	
}
</script>
<style scoped>
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.custom-head {
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 8;
		width: 100%;
	}
	.custom-head-body{width: 100%; height: 44px; line-height: 44px; position: relative; position: relative; text-align: center;}
	.custom-head-body h4{font-size: 34rpx; font-weight: 500;}
	.back{position: absolute; left: 2%; top: 50%; transform: translateY(-50%); height: 44px;}
	.back i{font-size: 50rpx !important;}
	.gradient{
		background: linear-gradient(136deg, #A0CEFE 0%, #2979FF 100%) !important; color: #fff;
	}
	.tool{position: absolute; right: 2%; top: 50%; transform: translateY(-50%); height: 44px;}
</style>